<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>博客爬取系统-首页</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    {% load staticfiles %}
    <link href="{% static 'css/normalize.css' %}" rel="stylesheet">
    <link href="{% static 'css/amazeui.min.css' %}" rel="stylesheet">
</head>
<body>
<header class="am-topbar">
    <h1 class="am-topbar-brand">
        <a href="#">博客爬取系统</a>
    </h1>
    <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
            data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span
            class="am-icon-bars"></span></button>

    <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
        <ul class="am-nav am-nav-pills am-topbar-nav">
            <li id="index_home"><a href="/">首页</a></li>
        </ul>
        <div class="am-topbar-right">
            <ul class="am-nav am-nav-pills am-topbar-nav admin-header-list">
                <li><a href=""><span class="am-icon-home"></span> 后台管理</a></li>
                <li class="am-hide-sm-only"><a href="javascript:" id="admin-fullscreen"><span
                        class="am-icon-arrows-alt"></span> <span class="admin-fullText">开启全屏</span></a></li>
            </ul>
        </div>
    </div>
</header>
<div class="am-g am-g-fixed blog-g-fixed" id="top">
    <style>
        .blog-footer {
            padding: 10px 0;
            text-align: center;
        }
        .amz-toolbar {
       position: fixed;
        right: 10px;
        bottom: 70px;
        z-index: 999;
    }
        .am-avg-sm-6>li {
            width:auto;
            margin: 5px;
        }
    </style>
    <div class="am-u-md-8">
        {% for blog in blog_list %}
        <!--如果数据不为空-->
            <!--数据遍历-->
                <article class="blog-main">
                    <h3 class="am-article-title blog-title">
                        <a href="{% url 'blogs' blog.id %}">{{ blog.title}}</a>
                    </h3>
                    <h4 class="am-article-meta blog-meta">
                        by <a href="#">{{ blog.author.name }}</a>
                        posted on <span class="am-text-primary">{{ blog.fbrq }}</span> catergory by
                        <a href="#">{{ blog.category.name }}</a>
                    </h4>
                    <div class="am-g">
                        <div class="am-u-sm-12">
                            <div>
                                {{ blog.contents| safe | truncatewords:20 }}
                            </div>
                            <div style="clear: both"></div>
                        </div>
                    </div>
                </article>
                <hr class="am-article-divider blog-hr">
            {% empty %}
                <!--如果数据为空-->
                <article class="blog-main">
                    <div class="am-vertical-align-middle">
                        <h1 class="am-text-danger am-center">暂无文章信息</h1>
                    </div>
                </article>
            {% endfor %}
            <ul class="am-pagination am-pagination-centered">
                {% if page.has_previous %}
                <li><a href="{% url 'index' %}?page={{ page.previous_page_number }}&category={{ category }}&source={{ source }}&search={{ search }}">&laquo;</a></li>
                {% else %}
              <li class="am-disabled"></li>
                {% endif %}
                {% if page_pre_have %}
                    <li><span>...</span></li>
                {% endif %}
                {% for num in page_count %}
                    <li {% if num == page.number %}class="am-active"{% endif %}><a href="{% url 'index' %}?page={{ num }}&category={{ category }}&source={{ source }}&search={{ search }}">{{ num }}</a></li>
                {% endfor %}
                {% if page_next_have %}
                    <li><span>...</span></li>
                {% endif %}
                {% if page.has_next %}
                <li><a href="{% url 'index' %}?page={{ page.next_page_number }}&category={{ category }}&source={{ source }}&search={{ search }}">>></a></li>
                {% else %}
              <li class="am-disabled"></li>
                {% endif %}
            </ul>
    </div>
    <div class="am-u-md-4 blog-sidebar">
        <div class="am-panel-group">
            <section class="am-panel am-panel-default">
                <div class="am-panel-hd">搜索文章</div>
                <div class="am-panel-bd">
                    <form class="am-topbar-form am-form-inline" role="search" action="{% url 'index' %}" method="get">
                        <div class="am-form-group">
                            <input type="text" class="am-form-field am-input-sm" placeholder="搜索文章" name="search">
                        </div>
                        <button type="submit" class="am-btn am-btn-primary am-radius am-btn-sm">搜索</button>
                    </form>
                </div>
            </section>
            <section class="am-panel am-panel-default">
                <div class="am-panel-hd">文章分类
                    <a class="am-topbar-right am-text-sm"
                       href="{% url 'index' %}?page={{ page.number }}&category=&source={{ source }}&search={{ search }}">全部</a>
                </div>
                <div class="am-panel-bd">
                    <!--假如分类列表不为空-->
                        <ul class="am-avg-sm-6 blog-team">
                            <!--数据遍历-->
                             {% for category_item in category_list %}
                                <li>
                                    <a class="am-btn {% ifequal category category_item.id %}am-btn-danger{% else %}am-btn am-btn-primary{% endifequal %} am-round am-text-sm"
                                           href="{% url 'index' %}?page={{ page.number }}&category={{ category_item.id }}&source={{ source }}&search={{ search }}">{{ category_item.name }}</a>
                                </li>
                             {% empty %}
                                <div class="am-vertical-align-middle">
                                    <span class="am-text-primary">暂无文章分类</span>
                                </div>
                            {% endfor %}
                        </ul>

                </div>
            </section>
            <section class="am-panel am-panel-default">
                <div class="am-panel-hd">文章作者
                    <a class="am-topbar-right am-text-sm"
                       href="{% url 'index' %}?page={{ page.number }}&category={{ category }}&source=&search={{ search }}">全部</a>
                </div>
                <div class="am-panel-bd">
                    <!--假如来源列表不为空-->
                    <ul class="am-avg-sm-6 blog-team">
                        <!--数据遍历-->
                         {% for source_item in author_list %}
                            <li>
                                <a class="am-btn {% ifequal source source_item.id %}am-btn-danger{% else %}am-btn am-btn-primary{% endifequal %} am-round am-text-sm"
                                       href="{% url 'index' %}?page={{ page.number }}&category={{ category }}&source={{ source_item.id }}&search={{ search }}">{{ source_item.name }}</a>
                            </li>
                         {% empty %}
                            <div class="am-vertical-align-middle">
                                <span class="am-text-primary">暂无来源信息</span>
                            </div>
                        {% endfor %}
                    </ul>
                </div>
            </section>
        </div>
    </div>
</div>
<div data-am-widget="gotop" class="am-gotop am-gotop-fixed">
    <a href="#top" title="回到顶部">
        <span class="am-gotop-title">回到顶部</span>
        <i class="am-gotop-icon am-icon-chevron-up"></i>
    </a>
</div>
<footer class="blog-footer">
    <p>基于Scrapy的博客爬虫系统<br>
        <small>© Copyright BSWS. by 子沐.</small>
    </p>
</footer>
    <!--[if lte IE 8 ]>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
    <script src="http://cdn.amazeui.org/amazeui/2.7.2/js/amazeui.ie8polyfill.js"></script>
    <![endif]-->
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/amazeui.min.js' %}"></script>
    <script src="{% static 'js/amazeui.widgets.helper.js' %}"></script>
    <script>
        var e=$.AMUI.fullscreen;
        $('#admin-fullscreen').on('click', function () {
             e.enabled&&e.toggle()
        });
    </script>
</body>
</html>